<template>
  <div class="ww">
    <el-popover
      v-model="visible"
      placement="right"
      width="400"
      trigger="manual"
    >
      <el-progress :percentage="percentage" />
      <el-link slot="reference" type="primary" :underline="false" @click="click">下载</el-link>
    </el-popover>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      visible: false,
      percentage: 0,
      timer: null,
      timers: null
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    percentage: {
      handler(val) {
        if (val > 100) {
          this.visible = false;
          this.percentage = 100;
          this.timers = setTimeout(() => {
            this.percentage = 0;
          }, 250);
        }
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    // console.log(this.visible);
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  destroyed() {
    this.timer && clearInterval(this.timer);
    this.timers && clearTimeout(this.timers);
  },
  // 方法集合
  methods: {
    dealTime() {
      this.timer && clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.percentage += Math.floor(Math.random() * 10 + 5);
      }, 250);
    },
    click() {
      const flag = !this.visible;
      this.visible = flag;
      if (this.percentage > 0 || flag === false) return;
      this.timer = setInterval(() => {
        this.percentage++;
      }, 1000);
      this.$emit('downloadFile', this.item);
    }
  }
};
</script>
<style lang='scss' scoped>
.ww{
  width: auto;
}
</style>
